<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>元素样式\尺寸操作</title>
		<!-- 元素样式操作 ：直接操作元素的样式下属性和属性值
		css()              功能---
		                      1个参数：传入css属性名
							  功能：获取匹配元素集合中第一个元素的css属性值
							  2个参数：传入css属性名和属性值
							  功能：设置匹配元素集合中所有元素的css属性值
							  n个参数：传入多个css属性名和属性值
							  语法糖：css({"属性名":"属性值",
							  "属性名":"属性值",
							  ......
							  "属性名":"属性值"
							  })
        width()和height()	 功能：匹配元素集合中第一个元素宽高度
		                     无参：获取匹配元素集合中第一个元素宽高度
							 有参：设置匹配元素集合中第一个元素宽高度
							 width(数值)
		outerWidth()和outerHeight()	
		出现原因：元素存在盒子中，盒子模型，宽度计算方式：内外边距+边框+内容
		无参：获取元素的宽高度，计算盒子模型：内边距+边框
		有参：传入bool值，true时，计算盒子模型：内外边距+边框
		-->
		<script src="../js/jquery-1.11.1.js"></script>
		<style>
			/* 样式1：为 .box 添加样式 */
			.box {
			      background-color: aqua; /* 背景颜色 */
			      padding: 20px;               /* 内边距 20px */
			      margin: 20px;                /* 外边距 20px */
			      border: 5px solid #fff333;      /* 边框 2px 实线 */
			   }
			/* 样式2：为 .result 添加上外边距 */
			.result {
			         margin-top: 10px;            /* 上外边距 10px */
					 font-weight: 700;
			    }
		</style>
	</head>
	<body>
		<!-- 引入jq框架-->
		<!-- 1.显示效果区域-->
		<div class="box" id="targetBox">框</div>
		<button id="getColorbtn">获取颜色属性值</button>
		<button id="setColorbtn">设置颜色效果</button>
		<button id="setBtn">设置多属性效果</button>
		<button id="gsBtn">获取元素宽度/设置元素宽度</button>
		<button id="bpBtn">获取高度（内边距+边框）</button>
		<button id="bpmBtn"></button>
		<!-- 2.结果提示功能区域 -->
		<div class="result" id="result">结果</div>
		<script>
		/*1.点击 获取颜色属性值 按钮  获取颜色值并打印页面上*/
		$("#getColorbtn").click(function(){
		//获取css属性值方式：传入属性名即可
		var bgColor=$(".box").css("background-color");	
			//页面上打印属性值？？
			$("#result").text("获取的属性值是："+bgColor)
		});
		/*2.点击 设置颜色效果 按钮 设置颜色值并打印在页面上*/
		$("#setColorbtn").click(function(){
		//改成橙色
			$(".box").css("background-color","orange");
			$("#result").text("改变后颜色为：橙色");
		});
		/*3.点击设置多属性效果按钮 圆 背景色 阴影*/
		$("#setBtn").click(function(){
			$(".box").css({"background-image":"url(../img/123.png)",
			               "border":"5px solid #33f",
						   "width":"300px",
						   "height":"300px",
						   "background-size":"100% 100%",
						   "border-radius":"50%",
						   "box-shadow":"5px 5px 10px"
			});
		}); 
		/*4.点击 获取、设置宽度*/
		$("#gsBtn").click(function(){
		var w=$(".box").width();	
		$("#result").text("获取宽度是："+w+"px");
		});
		/*5.点击 获取高度按钮 计算box空间高度*/
		$("#bpBtn").click(function(){
			var bp=$(".box").outerHeight();
			$("#result").text("获取高度是："+bp+"px")
		});
		$("#bpmBtn").click(function(){
			var bp=$(".box").outerHeight(true);
			$("#result").text("获取高度是："+bpm+"px")
		});
		</script>
	</body>
</html>